<template>
  <el-menu
      router
      style="overflow-y: auto"
      unique-opened
      :collapse="this.$store.state.isCollapse"
      class="el-menu-vertical-demo"
      :default-active="$route.path"
      text-color="#bfcbd9"
      active-text-color="#1890ff"
  >
    <el-menu-item index="/homePage">
      <img :src="logo" class="sidebar-logo" height="55%" />
      <span class="sidebar-title">后台管理</span>
    </el-menu-item>
    <template v-for="route in menuRoutes" :key="route.path">
      <!-- 显示含有子路由的菜单项 -->
      <el-sub-menu :index="route.path" v-if="route.children&&route.meta?.visible!==false&&menus.includes(route.name)">
        <template #title>
          <el-icon><Setting/></el-icon>
          {{ route.name }}
        </template>
        <!-- 迭代子路由 -->
        <template v-for="child in route.children">

          <!-- 显示含有子路由的菜单项 -->
          <el-sub-menu :index="child.path" v-if="child.children&&child.meta?.visible!==false&&menus.includes(child.name)">
            <template #title>
              <el-icon><Setting/></el-icon>
              {{ child.name }}
            </template>
            <!-- 迭代子路由 -->
            <template v-for="child1 in child.children">

              <!-- 显示含有子路由的菜单项 -->
              <el-sub-menu :index="child1.path" v-if="child1.children&&child1.meta?.visible!==false&&menus.includes(child1.name)">
                <template #title>
                  <el-icon><Setting/></el-icon>
                  {{ child1.name }}
                </template>
                <!-- 迭代子路由 -->
                <template v-for="child2 in child1.children">
                  <el-menu-item
                          v-if="child2.meta?.visible!==false&&menus.includes(child2.name)"
                          :key="child2.path"
                          :index="`${route.path}/${child.path}/${child1.path}/${child2.path}`"
                          @click="clickMenu(child2.path,`${route.path}/${child.path}/${child1.path}`,false,child2.meta?.tracertTo)"
                  >
                    <el-icon><Operation/></el-icon>
                    {{ child2.name }}
                  </el-menu-item>
                </template>
              </el-sub-menu>


              <el-menu-item
                      v-else
                      v-if="child1.meta?.visible!==false&&menus.includes(child1.name)"
                      :key="child1.path"
                      :index="`${route.path}/${child.path}/${child1.path}`"
                      @click="clickMenu(child1.path,`${route.path}/${child.path}`,false,child1.meta?.tracertTo)"
              >
                <el-icon><Operation/></el-icon>
                {{ child1.name }}
              </el-menu-item>
            </template>
          </el-sub-menu>


          <el-menu-item
              v-else
              v-if="child.meta?.visible!==false&&menus.includes(child.name)"
              :key="child.path"
              :index="`${route.path}/${child.path}`"
              @click="clickMenu(child.path,route.path,false,child.meta?.tracertTo)"
          >
            <el-icon><Operation/></el-icon>
            {{ child.name }}
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item
          v-else
          v-if="route.meta?.visible!==false&&menus.includes(route.name)"
          :key="route.path"
          :index="route.path"
          @click="clickMenu(route.path,'',true)"
      >
        <el-icon><Setting/></el-icon>
        {{ route.name }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import {Document, Location, Menu, Operation, Setting,} from '@element-plus/icons-vue'
import Logo from '/瑞铭LOGO.png'
import Hamburger from '@/components/Hamburger.vue'
import router, {route} from "@/router/index.js";

export default {
  components: {Operation, Location, Menu, Setting, Document, Hamburger},
  data() {
    return {
      menuRoutes: [],
      userInformation: JSON.parse(localStorage.getItem("user")),
      menus: [],
      logo: Logo,
      activeMenu: '',
    }
  },
  created() {
    this.userInformation.menus.forEach((item, index) => {
      this.menus[index] = item.menuName;
    })
    this.menuRoutes=route[0].children
  },
  // 刚开始对当前页面的路由进行添加
  mounted() {
    this.updateActiveMenu();
    this.$store.commit("addTab", this.$route)
  },
  watch: {
    $route() {
      this.updateActiveMenu();
    }
  },
  methods: {
    updateActiveMenu() {
      this.activeMenu = this.$route.path;
    },
    clickMenu(path, parentPath = '', isLeaf,tracert=false) {
      // 判断是否为叶子节点
      if (isLeaf) {
        // 如果当前路由已经是目标路由，避免重复跳转
        if (this.$route.path === `/${path}`) {
          return;
        }

        // 跳转到目标路径并添加到 Vuex 的标签页中
        router.push(`${path}`).then(() => {
          this.$store.commit('addTab', this.$route);
        }).catch(err => {
          console.error('Navigation error:', err);
        });
        return;
      }

      // 如果点击的是父级菜单，且 parentPath 不为空
      if (parentPath === '') {
        return;
      }
      if (tracert){
        console.log(tracert)
        // 跳转到目标路径并添加到 Vuex 的标签页中
        router.push(`${tracert}`)
        return;
      }
      // 确保 parentPath 和 path 都以 "/" 开头，并拼接完整路径
      const formattedParentPath = parentPath ? `/${parentPath.replace(/^\/+/, '')}` : '';
      const formattedPath = `/${path.replace(/^\/+/, '')}`;
      const fullPath = `${formattedParentPath}${formattedPath}`;
      // 如果当前路由已经是目标路由，避免重复跳转
      if (this.$route.path === fullPath) {
        return;
      }

      // 跳转到完整路径并添加到 Vuex 的标签页中
      router.push(fullPath).then(() => {
        this.$store.commit('addTab', this.$route);
      }).catch(err => {
        console.error('Navigation error:', err);
      });
    }
  },
}
</script>

<style scoped>

.sidebar-title {
  display: inline-block;
  margin: 0;
  font-weight: 600;
  line-height: 50px;
  font-size: 20px;
  vertical-align: middle;
}
</style>
